import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import DrillDownMapDemo from './DrillDownMapDemo';
import MarkerMapDemo from './MarkerMapDemo';
import GeoJSONMapDemo from './GeoJSONMapDemo';
import { LocationMap } from '@/components/Charts';

@connect()
class MapDemo extends Component {
  state = {
    areaList: ['福建省'],
  };

  onMapClick = (level, areaCN, areaNumber, areaList) => {
    this.setState({ areaList });
  };

  onMarkerClick = adcode => {
    console.log('adcode', adcode);
  };

  render() {
    const { areaList } = this.state;
    return (
      <Fragment>
        <Row>
          <Col span={12}>
            <LocationMap />
          </Col>
          <Col span={12} style={{ background: '#062353' }}>
            <MarkerMapDemo areaNumber={350400} onMarkerClick={this.onMarkerClick} />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            {areaList.join(' - ')}
            <DrillDownMapDemo
              areaNumber={350000}
              areaList={areaList}
              onMapClick={this.onMapClick}
            />
          </Col>
          <Col span={12} style={{ background: '#062353' }}>
            <GeoJSONMapDemo areaNumber={350400} />
          </Col>
        </Row>
      </Fragment>
    );
  }
}

export default MapDemo;
